<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="referrer" content="never">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>Webapp-music</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_819136_ck8rd4jiztc.css">
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>	
</head>
<body>
    <section id="page-music">
    	<main class="layout">
    		<div class="aside">
    			<figure></figure>
    			<div class="actions">
    				<span class="btn-collect iconfont icon-heart"></span>
    				<span class="btn-collect iconfont icon-play"></span>
    				<span class="btn-collect iconfont icon-next"></span>
    			</div>
    		</div>
    		<div class="detail">
    			<span class="tag">miya's musicbox</span>
    			<h1>All the best wishes for you</h1>
    			<ul>
    				<li class="icons">
    					<span class="iconfont icon-earphone"></span>"+999"
    				</li>
    				<li class="icons">
    					<span class="iconfont icon-heart"></span>"+666"
    				</li>
    				<li class="icons">
    					<span class="iconfont icon-like"></span>"+888"
    				</li>
    			</ul>
    			<div class="area-bar">
    				<div class="bar">
    					<div class="bar-progress"></div>
    				</div>
    				<div class="current-time">0:00</div>
    			</div>
    			<div class="author">王小勤</div>
    		    <div class="lyric">
    		    	<p></p>
    		    </div>
    		</div>
    	</main>
    	<footer>
    		 <div class="layout">
    		 	<span class="iconfont icon-left"></span>
    		 	<span class="iconfont icon-right"></span>
    		 	<div class="box">
    		 		<ul>
    		 			<li>
    		 				<div class="cover" style="background-image:url(https://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(http://cloud.hunger-valley.com/music/public_tuijian_winter.jpg-small)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 			<li>
    		 				<div class="cover" style="background-image:url(https://goss4.vcg.com/creative/vcg/800/new/VCG211164371115.jpg)"></div>
    		 				<h3>我的红心歌曲</h3>
    		 			</li>
    		 		</ul>
    		 	</div>
    		 </div>
    	</footer>
    </section>
    <section id="page-cover"></section>
    <div class="bg"></div>
    <script src="js/index.js"></script>
</body>
</html>